<template>
  <q-card style="height: 100%" >
    <q-card-section style="height: 100%" >
      <!-- <ScrollArea style="height: 100%"> -->
        <q-table
          class="my-table "
          wrap-cells
          title="Critical Hard Time Replacement"
          style="height: 100%"
          flat
          hide-header
          :columns="columns"
          :rows="rows"
          :rows-per-page-options="[0]"
          hide-pagination
          bordered
        >
        </q-table>
      <!-- </ScrollArea> -->
    </q-card-section>
  </q-card>
</template>

<script setup lang="ts">
import { QTableColumn } from 'quasar';
import { getCriticalHardTimeReplacement } from 'src/services/reportService';
import { ref } from 'vue';

const rows = ref();

const align = 'left';

const columns: QTableColumn[] = [
  {
    name: 'description',
    label: '',
    field: 'description',
    sortable: true,
    format: (val, row) => {
      return `Item: ${row.equipment} (S/N: ${row.serial_no}) -${
        row.component
      } needed Overdue date: ${row.overdue_date.split('T')[0]}`;
    },
    style(row) {
      if (row.status == 'overdue') {
        return 'color: #D32F2F;';
      }
      if (row.status == 'one_month_left') {
        return 'color: #F57F17;';
      }
      return '';
    },
    align,
  },
];

async function init() {
  const res = await getCriticalHardTimeReplacement();
  console.log(res);
  rows.value = res;
}

init();
</script>

<style scoped lang="scss">

::v-deep(.scroll){
    &::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  }
  &::-webkit-scrollbar-thumb{
      background-color: #d9d9d9;
  }
  &::-webkit-scrollbar-track {
      background: rgb(255,255,255,0.5);
  }
}
</style>
